<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            align-items: center;
            justify-content: center;
        }

        .box {
            height: 300px;
            width: 300px;
            display: flex;
            background-color: skyblue;
            color: white;
            font-size: 30px;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="box">0</div>
    <!-- 
        第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。
        当第二次调用该函数时，它会清除前一次的定时器并设置另一个。
        如果前一个定时器已经执行过了，这个操作就没有任何意义。
        然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。
        目的是只有在执行函数的请求停止了一段时间之后才执行。 
    -->
    <script>
        const box = document.querySelector('.box');
        let count = 0;

        // 降低频率 时间处理函数
        function debounce(func, wait) {
            // 闭包空间
            var timeout;
            // 实现 反复移动鼠标时，不执行，最后一次执行
            return function () {
                // func(event);
                var context = this;//event事件
                var args = arguments;
                clearTimeout(timeout);
                // 当事件触发，上一次事件执行的 timeout 被清除。
                // 事件停止触发，clear停止，上一次timeout生效，等待wait时间，要做的事就可以做了。
                // 定时器ID
                timeout = setTimeout(function () {
                    func.apply(context, args);
                }, wait);

            }
        }
        // mouseover 要做的事情
        function getUserAction(e) {
            // console.log(e);event
            box.innerText = ++count;
        }
        // 函数的参数或函数的返回值是函数时，叫高阶函数
        box.addEventListener('mousemove', debounce(getUserAction, 1000))

    </script>
</body>

</html>